<template>
  <div class="card">
    <div class="shopcard" v-for="(item, index) in values" :key="index">
      <div class="check">
        <van-checkbox
          v-model="item.checked"
          @click="checkItem(index)"
        ></van-checkbox>
      </div>
      <div class="pic"><img :src="item.good_src" alt="" /></div>
      <div class="content">
        <div class="title">{{ item.good_name }}{{ item.good_des }}</div>
        <div class="del">
          <span @click="delShop(item.id)"
            ><van-icon name="delete-o" size="20px"
          /></span>
        </div>
        <div class="price">
          <span>￥{{ item.good_price }}</span>
          <span><van-stepper v-model="item.good_num" integer /></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapState, mapActions } from "vuex"
export default {
  props: {
    values: {
      type: Array,
      require: true,
    },
  },

  data() {
    return {
      value: true,
      checked: true,
    }
  },

  methods: {
    // 删除购物车信息
    delShop(id) {
      console.log(id)
      let param = { id }
      this.$api.cart.delShopMessage(param).then((res) => {
        console.log(res)
      })
      this.selectUserCart()
    },

    // 查询该用户的购物车信息
    selectUserCart() {
      this.$api.cart.selectUserCart().then((res) => {
        // 将返回的数据保存到vuex中即可，再渲染

        res.data.forEach((item) => {
          item["checked"] = true
        })
        console.log(res)
        this.cartList(res.data)
      })
    },

    ...mapMutations([
      "loginOut",
      "userInit",
      "cartList",
      "checkAll",
      "checkItem",
    ]),
  },

  computed: {
    ...mapGetters(["isCheckAll", "total"]),
  },
}
</script>

<style lang="less" scoped>
.card {
  box-sizing: border-box;
  background-color: rgb(240, 240, 240);
}

.shopcard {
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.25rem /* 20/16 */ /* 20/16 */ auto;
  padding: 0 0.3125rem /* 5/16 */;
  background-color: #fff;
  width: 95%;
  height: 9.375rem /* 150/16 */;
  border-radius: 0.75rem /* 12/16 */;
  .pic {
    width: 5rem /* 80/16 */ /* 100/16 */ /* 80/16 */ /* 100/16 */ /* 50/16 */;
    height: 6.25rem /* 100/16 */;
    background-color: pink;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .content {
    box-sizing: border-box;
    padding: 0.3125rem /* 5/16 */;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 13.75rem /* 220/16 */ /* 230/16 */;
    height: 100%;

    .title {
      margin-top: 0.625rem /* 10/16 */;
      text-overflow: ellipsis; /* 将文本溢出显示... */
      overflow: hidden; /* 超出隐藏 */
      word-break: break-all; /* break-all(允许在单词内换行) */
      display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-line-clamp: 2; /* 呈现几行 我这里设置两行,可自行调试 */
    }

    .del {
      display: flex;
      justify-content: end;
      width: 100%;
    }

    .price {
      display: flex;
      justify-content: space-between;
      span:nth-child(1) {
        font-size: 1.25rem /* 20/16 */;
        color: red;
      }
    }
  }
}
</style>
